<template>
  <div v-loading="loading" class="list-table">
    <!-- <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目类型')" prop="dealName">
        <dict-select
          v-model="params.stageType"
          dictionary="deal_type"
          :clearable="true"
          @change="stageTypeChange"
        />
      </el-form-item>
      <el-form-item :label="$t('负责人')" prop="dealName">
        <UserSelect
          v-model="queryParams.personCharge"
          :placeholder="$t('选择用户')"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle(queryParams.stageType)">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form> -->
    <el-row v-loading="loadChart">
      <el-col :span="12" style="min-height:300px;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('项目投资数量') }}</span>
        </div>
        <!--<Empty :data="chartData">-->
        <MapChart key="barChart" ref="barChart" height="300px" :chart-data="mapChartData" @clickHandel="clickHandel" />
        <!--</Empty>-->
      </el-col>
      <el-col :span="12" style="min-height:300px;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('地域金额') }}</span>
        </div>
        <!--<Empty :data="chartData">-->
        <!--        <map-chart ref="mapChart" :chart-data="chartData" height="300px" @clickHandel="clickHandel" />-->
        <barLineChart v-if="chartData.datas.length > 0" ref="barChart" :chart-data="chartData" height="300px" @clickHandel="clickHandel" />
        <!--</Empty>-->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="area-header">
          <span class="area-header-title">{{ $t('项目地域详情') }}</span>
        </div>
        <el-table v-loading="loading" tooltip-effect="darkTable" :data="tableList" border max-height="500">
          <el-table-column :label="$t('项目名称')" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId, gpId: scope.row.gpId}}"
                class="link_a"
              >{{ scope.row.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('负责人')" align="center" prop="personCharge" width="130" />
          <el-table-column :label="$t('投资金额') + $t('金额单位')" align="center" prop="amountInvestmentEstimate" width="130">
            <template slot-scope="scope">
              <span>{{ moneyFormat(scope.row.amountInvestmentEstimate, 'w') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('省份')" align="center" prop="areaName" width="130">
            <template slot-scope="scope">
              <span>{{ $t(scope.row.areaName) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="pageData"
    />
  </div>
</template>

<script>
    import { countDealArea, findByProvinceRegistered } from '@/api/base/deal/dealBase'
    import MapChart from '@/views/chart/mapChart'
    import barLineChart from '@/views/chart/barLineChart.vue'
    export default {
      components: {
        MapChart, barLineChart
      },
      data() {
          return {
            chartData: {
              datas: []
            },
            mapChartData: [],
            loadChart: false,
            mapChart: true,
            IndustryFocusCharts: true,
            tableList: [],
            loading: false,
            total: 0,
            typeList: [],
            params: {
              pageNum: 1,
              pageSize: 10,
              areaId: undefined,
              stageType: undefined,
              personCharge: undefined,
              dealStage: undefined
            },
            // 记录上一次点击事件传的参数值
            previousVal: undefined,
            queryParams: {
              stageType: undefined,
              personCharge: undefined
            }
          }
      },
      created() {
        this.getDicts('deal_type').then(response => {
          this.typeList = response.data
          this.getList(this.params.stageType)
        })
        this.pageData()
      },
      methods: {
        getList(stageType) {
          this.loadChart = true
          this.queryParams.stageType = stageType
          countDealArea(this.queryParams).then(response => {
            var rows = response.data || []
            this.mapChartData = JSON.parse(JSON.stringify(rows))
            if (rows.length > 0) {
              this.chartData.xLabel = rows.map(el => el.areaName)
              this.chartData.legend = false
              this.chartData.seriesLabelShow = true
              this.chartData.barWidth = 20
              this.chartData.datas = [
                {
                  type: 'bar',
                  name: this.$t('投资金额') + this.$t('金额单位'),
                  data: rows.map(ele => { return { value: ele.count, name: ele.areaName, areaId: ele.areaId, amount: ele.amount } })
                }
              ]
            }
            this.loadChart = false
          })
        },
        clickHandel(val) {
          this.loading = true
          if (val) {
            this.params.areaId = val.areaId
          }
          if (this.previousVal === this.params.areaId && this.params.areaId !== '无') {
            this.params.areaId = undefined
          }
          this.pageData()
          this.previousVal = this.params.areaId
        },
        // 点击分页查询
        pageData() {
          this.loading = true
          this.params.personCharge = this.queryParams.personCharge
          findByProvinceRegistered(this.params).then(response => {
            this.tableList = response.rows
            this.total = response.total
            this.loading = false
          })
        },
        /** 项目类型查询 */
        stageTypeChange(val) {
          this.getList(val)
          this.pageData()
          this.params.areaId = undefined
        },
        /** 搜索按钮操作 */
        queryHandle(stageType) {
          this.queryParams.pageNum = 1
          this.getList(stageType)
          this.pageData()
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.params.areaId = undefined
          this.queryParams.personCharge = undefined
          this.queryParams.stageType = undefined
          this.params.personCharge = undefined
          this.params.stageType = undefined
          this.queryHandle()
        }
      }
    }
</script>

<style scoped>

</style>
